<template>
  <view class="wanlpage-advert-image">
    <view class="image" :class="[`layout-${pageData.params.imgLayout}`]" :style="[pageData.style]">
      <view
        class="item"
        v-for="(image, keys) in pageData.data"
        :key="keys"
        :style="{ margin: pageData.params.imgPaddingTb + ' ' + pageData.params.imgPaddingLf }"
        @tap="onLink(image.link)"
      >
        <image :src="$wanlshop.oss(image.image, 420, 0, 1, 'transparent', 'png')" mode="widthFix" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'WanlPageImage',
  props: {
    pageData: {
      type: Object,
      default: function () {
        return {
          name: '图片组件',
          type: 'image',
          params: [],
          style: [],
          data: [],
        };
      },
    },
    methods: {
      async onLink(url) {
        this.$wanlshop.on(url);
      },
    },
  },
};
</script>
<style lang="scss">
.wanlpage-advert-image {
  image {
    width: 100% !important;
  }
  /*图片橱窗*/
  .image {
    display: flex;
    overflow: hidden;
    .item {
      display: grid;
    }
    &.layout-1 {
      display: block;
    }

    &.layout-2 {
      flex-wrap: wrap;

      & > view {
        width: 50%;
      }
    }

    &.layout-3 {
      flex-wrap: wrap;

      & > view {
        width: 33.33333%;
      }
    }

    &.layout-4 {
      flex-wrap: wrap;

      & > view {
        width: 25%;
      }
    }

    &.layout-5 {
      flex-wrap: wrap;

      & > view {
        width: 20%;
      }
    }

    &.layout-11 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
      }

      view:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1 / 2;
      }
    }

    &.layout-12 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1) {
        grid-column: 1 / 5;
      }

      view:nth-child(2),
      view:nth-child(4) {
        grid-column: 1 / 3;
      }

      view:nth-child(3),
      view:nth-child(5) {
        grid-column: 3 / 5;
      }
    }

    &.layout-13 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1) {
        grid-column: 1 / 5;
      }

      view:nth-child(2),
      view:nth-child(5),
      view:nth-child(7) {
        grid-column: 1 / 3;
      }

      view:nth-child(6),
      view:nth-child(8) {
        grid-column: 3 / 5;
      }
    }

    &.layout-14 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1),
      view:nth-child(3),
      view:nth-child(6),
      view:nth-child(8) {
        grid-column: 1 / 3;
      }

      view:nth-child(2),
      view:nth-child(7),
      view:nth-child(9) {
        grid-column: 3 / 5;
      }
    }

    &.layout-15 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1),
      view:nth-child(6),
      view:nth-child(8) {
        grid-column: 1 / 3;
      }

      view:nth-child(2),
      view:nth-child(5),
      view:nth-child(7),
      view:nth-child(9) {
        grid-column: 3 / 5;
      }
    }

    &.layout-16 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1),
      view:nth-child(7) {
        grid-column: 1 / 3;
      }

      view:nth-child(2),
      view:nth-child(8) {
        grid-column: 3 / 5;
      }
    }

    &.layout-17 {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-auto-flow: row dense;

      view:nth-child(1),
      view:nth-child(3) {
        grid-column: 1 / 3;
      }

      view:nth-child(2),
      view:nth-child(4) {
        grid-column: 3 / 5;
      }
    }
  }
}
</style>
